<template>

    <div>
        <div class="goodsSearchBox" v-loading="loading">
            <el-form :inline="true" ref="form">
                <el-button round type="primary" @click="handleAddGoodsClass">添加分类</el-button>
                <span style="margin-left: 350px;">分类名称：</span>
                <el-input
                        style="width: 200px;"
                        placeholder="请输入分类名称"
                        v-model="name">
                </el-input>
                <el-button type="primary" icon="el-icon-search" circle @click="handleSearch"></el-button>
                <el-button round @click="handleReset">重置</el-button>

            </el-form>
        </div>
        <div class="goodsTableBox">
            <el-table
                    :data="list"
                    border
                    style="width: 881px">
                <el-table-column
                        prop="name"
                        label="名称"
                        width="500">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="icon"
                        label="图标"
                        width="180">
                    <template slot-scope="scope">
                        <el-image
                                style="width: 50px; height: 50px"
                                :src="scope.row.icon"
                                fit="contain"></el-image>
                    </template>
                </el-table-column>
                <el-table-column align="center" width="200">
                    <template slot-scope="scope">
                        <el-button
                                @click="handleClassUpdate(scope.row.id)"
                                icon="el-icon-edit"
                                size="mini"
                                type="primary"
                                round>修改</el-button>
                        <el-button
                                @click="handleClassDelete(scope.row.id)"
                                icon="el-icon-delete"
                                size="mini"
                                type="danger"
                                round>删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div class="goodsPage">
            <el-pagination
                    v-if="goodsPageVisible"
                    background
                    layout="prev, pager, next"
                    :page-size="10"
                    :total="total"
                    @current-change="handlePage"
            >

            </el-pagination>
        </div>
        <div style="height: 100px"></div>
    </div>
</template>

<script>

    export default {
        name: 'goodsMerchant',
        data(){
            return{
                list: [],
                loading: false,
                total: 0,
                name: '',
                goodsPageVisible: true
            }
        },
        methods:{
            defaultData(page,name){
                this.loading = true;
                this.$http.get('/web/good/class/list',{
                    params: {
                        token: localStorage.getItem('user_token'),
                        page: page,
                        pageSize: 10,
                        name: name
                    }
                }).then(response => {
                    if (response.data.status === 'success'){
                        this.list = response.data.data.list;
                        this.total = response.data.data.pagination.total
                    }
                    this.loading = false;
                }).catch(error => {
                    this.loading = false;
                })
            },

            handleReset(){
                this.name = '';
                this.defaultData();
            },

            handleSearch(){
                this.defaultData(1,this.name);
            },

            handlePage(page){
                this.defaultData(page);
            },

            handleClassDelete(id){
                this.$confirm('是否删除该分类?', '删除分类', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.loading = true;
                    this.$http.get('web/good/class/del',{
                        params: {
                            token: localStorage.getItem('user_token'),
                            id: id
                        }
                    }).then(response => {
                        if (response.data.status === 'success'){
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.defaultData();
                        }
                        this.loading = false;
                    }).catch(error => {
                        console.log(error);
                        this.loading = false;
                    })

                });
            },

            handleAddGoodsClass(){
                this.$router.push({name: 'addGoodsMerchant'})
            },

            handleClassUpdate(id){
                this.$router.push({name: 'updateGoodsMerchant', query: {id: id}})
            }
        },
        mounted() {
            this.defaultData();
        }
    }
</script>

<style>
    .goodsTableBox{
        margin-top: 24px;
        margin-left: 250px;
    }
    .goodsSearchBox{
        margin-top: 50px;
        margin-left: 250px;
    }
    .goodsPage{
        margin-top: 24px;
        margin-left: 500px;
    }
</style>
